class BianJiMianBan extends HTMLElement {
	biaoTi = null
	xiangRongQi = null // 面板项容器
	
	constructor() {
		super()
		
		let shadow = this.attachShadow({ mode: 'open' })

		let yangShi = document.createElement('style')
		yangShi.textContent = `
			.biao-ti {
				font-weight: 600;
				box-sizing: border-box;
				width: 100%;
				text-align: center;
				padding: 5px;
				margin-bottom: 10px;
				border-bottom: 1px solid rgba(0, 100, 200, 1);
				background: rgba(0, 100, 200, .3);
			}
			.xiang-rong-qi {
				width: 100%;
			}
			.an-niu-rong-qi {
				width: 100%;
				margin: 1rem 0 1rem;
				display: flex;
				justify-content: center;
			}
			.an-niu {
				font-size: 15px;
				cursor: pointer;
				color: #009;
				background: rgba(250, 250, 255, 0.7);
				padding: 3px 6px;
				width: 50px;
				border-radius: 5px;
				text-align: center;
			}
		`
		shadow.appendChild(yangShi)

		this.biaoTi = document.createElement('div')
		this.biaoTi.classList.add('biao-ti')
		shadow.appendChild(this.biaoTi)

		this.xiangRongQi = document.createElement('div')
		this.xiangRongQi.classList.add('xiang-rong-qi')
		shadow.appendChild(this.xiangRongQi)

		let anNiuRongQi = document.createElement('div')
		anNiuRongQi.classList.add('an-niu-rong-qi')
		shadow.appendChild(anNiuRongQi)

		let queDingAnNiu = document.createElement('div')
		queDingAnNiu.classList.add('an-niu')
		queDingAnNiu.innerHTML = '确定'
		queDingAnNiu.onclick = () => this.queDing()
		anNiuRongQi.appendChild(queDingAnNiu)

		let quXiaoAnNiu = document.createElement('div')
		quXiaoAnNiu.classList.add('an-niu')
		quXiaoAnNiu.style.color = '#eee'
		quXiaoAnNiu.style.background = 'none'
		quXiaoAnNiu.innerHTML = '取消'
		quXiaoAnNiu.onclick = () => this.quXiao()
		anNiuRongQi.appendChild(quXiaoAnNiu)
	}
	
	connectedCallback() {
		this.style = `
			${this.style.cssText}
			visibility: hidden;
			position: absolute;
			right: 50px;
			top: 50px;
			z-index: 10;
			width: 300px;
			border-radius: 5px;
			color: #fff;
			background: rgba(0, 100, 200, 0.8);
		`
	}

	daKai() {
		this.style.visibility = 'visible'
	}

	guanBi() {
		this.style.visibility = 'hidden'
	}

	chongZhi() {
		this.biaoTi.innerHTML = ''
		this.xiangRongQi.innerHTML = ''
		this.queDing = () => {}
		this.quXiao = () => {}
	}

	// 添加面板输入项
	tianJiaXiang({ leiXing, mingZi, zhi, zuiDa, zuiXiao, xuanXiang}) {
		let mianBanXiang = document.createElement('shu-ru-xiang')
		mianBanXiang.setAttribute('lei-xing', leiXing)
		mianBanXiang.setAttribute('ming-zi', mingZi)
		
		if (leiXing == '数字' || leiXing == '颜色') {
			if (zuiDa !== undefined) mianBanXiang.setAttribute('zui-da', zuiDa)
			if (zuiXiao !== undefined) mianBanXiang.setAttribute('zui-xiao', zuiXiao)
			mianBanXiang.setAttribute('zhi', zhi)
		}
		if (leiXing == '选项') {
			mianBanXiang.tianJiaXuanXiang(xuanXiang)
			// 赋值需在添加选项后
			mianBanXiang.setAttribute('zhi', zhi)
		}
		this.xiangRongQi.appendChild(mianBanXiang)

		return mianBanXiang
	}
	// 确定
	queDing() {/* 由编辑模式具体实现 */}
	// 取消
	quXiao() {/* 由编辑模式具体实现 */}
}



customElements.define('bian-ji-mian-ban', BianJiMianBan)